<template>
  <div class="xtx-latestpic">
    <div class="container">
      <Panel title="最新专题">
        <template #head-right>
          <More path="/" />
        </template>
        <template #panel-content>
          <div class="xtx-latestpic-box" ref="target">
            <transition name="fade">
              <ul class="xtx-latestpic-list" v-if="result?.length">
                <li
                  class="xtx-latestpic-list-item"
                  v-for="topic in result"
                  :key="topic.id"
                >
                  <router-link to="/">
                    <img :src="topic.cover" alt="" />
                    <div class="xtx-latestpic-meta">
                      <p class="xtx-latestpic-meta-title">
                        <span
                          class="xtx-latestpic-meta-title__top line-ellipsis"
                          >{{ topic.title }}</span
                        >
                        <span
                          class="xtx-latestpic-meta-title__sub line-ellipsis"
                          >{{ topic.summary }}</span
                        >
                      </p>
                      <span class="xtx-latestpic-meta__price"
                        >&yen;{{ topic.lowestPrice }}</span
                      >
                    </div>
                  </router-link>
                  <div class="xtx-latestpic-list-item-foot">
                    <span class="xtx-latestpic-list-item-foot__like">
                      <iconify-icon
                        icon="ph:heart-light"
                        color="#999"
                      ></iconify-icon>
                      {{ topic.collectNum }}
                    </span>
                    <span class="xtx-latestpic-list-item-foot__view">
                      <iconify-icon icon="ph:eye" color="#999"></iconify-icon>
                      {{ topic.viewNum }}
                    </span>
                    <span class="xtx-latestpic-list-item-foot__reply">
                      <iconify-icon
                        icon="mdi:comment-text-outline"
                        color="#999"
                      ></iconify-icon>
                      {{ topic.replyNum }}
                    </span>
                  </div>
                </li>
              </ul>
              <div class="skeleton" v-else>
                <Skeleton
                  width="404px"
                  height="360px"
                  bgColor="#e4e4e4"
                  animate
                  v-for="i in 3"
                  :key="i"
                />
              </div>
            </transition>
          </div>
        </template>
      </Panel>
    </div>
  </div>
</template>

<script setup lang="ts">
import Panel from './Panel.vue'
import More from '@/components/More.vue'
import { latestTopicAPI } from '@/api/home'
import { useLazyData } from '@/hooks/useLazyData'
import Skeleton from '@/components/Skeleton.vue'
import { type LatestTopic } from '@/api/home/types.d'
defineOptions({
  name: 'LatestTopic'
})
/** 获取数据 */
const { result, target } = useLazyData<LatestTopic>(latestTopicAPI)
</script>

<style lang="scss" scoped>
.xtx-latestpic {
  padding-bottom: 40px;
  background: $bg-gary;

  &-box {
    position: relative;
    height: 360px;
  }

  &-list {
    display: flex;
    justify-content: space-between;

    &-item {
      width: 404px;
      transition:
        box-shadow 0.5s,
        transform 0.5s;

      &:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-3px);
      }

      a {
        position: relative;
        display: block;
        height: 288px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &-foot {
        padding: 0 20px;
        height: 72px;
        background-color: $basic-white;
        line-height: 72px;

        span {
          &:hover {
            cursor: default;
          }
        }

        &__like {
          margin-right: 25px;
        }

        &__view {
        }

        &__reply {
          float: right;
        }
      }

      .xtx-latestpic-meta {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.8),
          transparent 50%
        );

        &-title {
          position: absolute;
          bottom: 0;
          left: 0;
          padding-left: 16px;
          width: 70%;
          height: 70px;

          &__top {
            display: block;
            margin-bottom: 5px;
            color: $basic-white;
            font-size: 22px;
          }

          &__sub {
            display: block;
            color: #999;
            font-size: 20px;
          }
        }

        &__price {
          position: absolute;
          right: 16px;
          bottom: 25px;
          line-height: 1;
          padding: 4px 8px;
          background-color: $basic-white;
          border-radius: 2px;
          color: #cf4444;
          font-size: 18px;
        }
      }
    }
  }

  .skeleton {
    display: flex;
    justify-content: space-between;
  }
}
</style>
